<html>
<head>
	<!--MOCHAUI-->
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-core-nocompat-yc.js"></script>
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-more-yc.js"></script>
	<script type="text/javascript" src="../../Core/core.js"></script>
	<script type="text/javascript" src="../../Core/desktop.js"></script>
	<script type="text/javascript" src="../column/column.js"></script>
	<script type="text/javascript" src="../panel/panel.js"></script>
	<script type="text/javascript" src="../taskbar/taskbar.js"></script>
	<script type="text/javascript" src="../window/window.js"></script>
	<script type="text/javascript" src="../window/modal.js"></script>
	<!--MOCHAUI-->
	<script type="text/javascript" src="checkboxgrid.js"></script>
	<script type="text/javascript">

		var items = [
			{value:'item1',text:"Item 1",  checked: false},
			{value:'item2',text:"Item 2",  checked: false},
			{value:'item3',text:"Item 3",  checked: false},
			{value:'item4',text:"Item 4",  checked: true},
			{value:'item5',text:"Item 5",  checked: false},
			{value:'item6',text:"Item 6",  checked: false},
			{value:'item7',text:"Item Long 7",  checked: false},
			{value:'item8',text:"Item Longer 8",  checked: false},
			{value:'item9',text:"Item Longest 9",  checked: false},
			{value:'item10',text:"Item 10",checked: false}
		];

		new MUI.CheckBoxGrid({
			container:'example1',
			width:260,
			height:100,
			id:'cbg1',
			items:items,
			onItemClick: function(checked, inp, self, e) {
				alert('receieved onItemClick command on item ' + inp.value);
			},
			onValueChanged: function(value, self, e) {
				alert('receieved onValueChanged command, value = ' + self.options.value);
			}
		});

		new MUI.CheckBoxGrid({
			container:'example2',
			width:280,
			height:100,
			id:'cbg2',
			items:items,
			labelPlacement:'left'
		});

	</script>
	<link rel="stylesheet" type="text/css" href="../../Themes/default/css/checkboxgrid.css"/>

</head>

<body>

<div id="example1" style="width:400px;float:left">
</div>
<div id="info" style="float:right">
</div>
<div style="clear:both"></div>
<br/><br/>

<div id="example2" style="width:400px;">
</div>
</body>
</html>
